<template>
  <div class="white-bg ">
    <el-scrollbar class="renderEchartsEdit">
      <Repl
        theme="dark"
        :store="store"
        class="repl"
        ref="replRef"
        :editor="Monaco"
        id="repl"
      />

      <div class="renderEcharts jcfend">
        <el-button type="primary" @click="savePng">下载图片</el-button>
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup lang="tsx">
import { ref, reactive, getCurrentInstance, onMounted, watchEffect } from "vue";
import { useRouter, useRoute } from "vue-router";
// import { Repl, useStore, useVueImportMap, File } from "/@ts/components/Repl";
// import Monaco from "/@/components/Repl/monaco/Monaco.vue";
import { Repl, useStore, useVueImportMap, File } from "@vue/repl";
import Monaco from "@vue/repl/monaco-editor";
import * as componentData  from '/@ts/views/modules';
  import { saveAs } from 'file-saver'
import { toPng } from "html-to-image";
// import { str } from "./renderEcharts";
const router = useRouter();
const route = useRoute();
// retrieve some configuration options from the URL
const replRef =ref("")
const savePng = () =>{
   var node:any = document.getElementById('repl');
  const iframe = node.querySelector("iframe")
           var iframeDocument:any = iframe.contentDocument || iframe.contentWindow.document;
            // 示例：获取iframe中的元素
            var iframeElement = iframeDocument.getElementById('app');
         
      toPng(iframeElement)
        .then( (dataUrl)=> {
             saveAs(dataUrl,  `${route.params.text}.png`)
        })
}
const {
  importMap: builtinImportMap,
  vueVersion,
  productionMode,
} = useVueImportMap({
  // specify the default URL to import Vue runtime from in the sandbox
  // default is the CDN link from jsdelivr.com with version matching Vue's version
  // from peerDependency
  //   "echarts": 'https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js',
  //   runtimeProd: 'cdn link to vue.runtime.esm-browser.prod.js',
  //   serverRenderer: 'https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js',
  //   runtimeDev: 'cdn link to vue.runtime.esm-browser.js',
  //   runtimeProd: 'cdn link to vue.runtime.esm-browser.prod.js',
  //   serverRenderer: 'cdn link to server-renderer.esm-browser.js',
});

  // builtinImportMap.value.imports["tool"] =
  // "/tool.js";
const echartsData = componentData[route.params.text]
const template = ref({
  welcomeSFC: "",
});

const mainFile = ref("App.vue");
const files = ref<any>({
})

template.value.welcomeSFC = echartsData[mainFile.value]
for (const key in echartsData) {
  if (Object.hasOwnProperty.call(echartsData, key)) {
    const element = echartsData[key];
    if(key!=mainFile.value){
       files.value[key] =new File(key,element,false) ;
    }
   
  }
}

const store = useStore({
  // pre-set import map
  vueVersion,
  builtinImportMap: builtinImportMap,
  template: template,
  files
});
   
productionMode.value = true;
const dialogVisible = ref(true);
const state = reactive({});
onMounted(() => {
setTimeout(()=>{
    console.log('object :>> ', replRef.value);
},1000)
});
</script>

<style scoped lang="scss">
.renderEchartsEdit {
  width: 100%;
  height: calc(100vh - 114px);
  position: relative;
  .repl {
    width: 100%;
    height: 100%;
  }
  .renderEcharts{
    position: absolute;
    right: 30px;
    bottom: 20px;


  }
}
</style>
